<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>快速掌握Bootstrap4布局</title>
    <!--    Bootstrap核心css文件-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
    <style>
        img{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body class="container">
<h3 class="mb-4">嵌套</h3>
<div class="row">
    <div class="col-12 col-lg-6">
<!--        嵌套行-->
        <div class="row border no-gutters">
            <div class="col-12 col-sm-3"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592380068202&di=0eee2ce7449491428f479285020a7040&imgtype=0&src=http%3A%2F%2Fwww.cflac.org.cn%2Fxw%2F201810%2FW020181008346545600505.jpg" alt=""></div>
            <div class="col-12 col-sm-9 pl-3">李白诗歌的语言，有的清新如同口语，有的豪放，不拘声律，近于散文，但都统一在"清水出芙蓉，天然去雕饰"的自然美之中。</div>

        </div>
    </div>
      <div class="col-12 col-lg-6">
<!--        嵌套行-->
        <div class="row border no-gutters">
            <div class="col-12 col-sm-3"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592380151056&di=17af252bd8370ee0591ecf708741f42c&imgtype=0&src=http%3A%2F%2Fimage3.cnpp.cn%2Fupload%2Fimages%2F20151227%2F00041237439_400x508.jpg" alt=""></div>
            <div class="col-12 col-sm-9 pl-3">在杜甫中年因其诗风沉郁顿挫，忧国忧民，杜甫的诗被称为"诗史"。他的诗词以古体，律诗见长，风格多样，以"沉郁顿挫"四字准确概括出他自己的作品风格，而以沉郁为主。</div>

        </div>
    </div>
</div>



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!--Bootstrap核心JavaScript文件-->
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

